<template>
	<yb-list
	ref="list"
	type="page"
	custom-class="yb-flex-1"
	:bounce="bounce"
	:empty="emptySync"
	:loading="loadingSync"
	:pulldown="pulldownSync"
	:loadmore="loadmoreSync"
	:enableScrolling="enableScrolling"
	@scroll="onScroll"
	@pulldown="onPulldown"
	@loadmore="onLoadmore">
		<slot></slot>
		<yb-list-item v-for="(item, index) in listSync" :key="item.id + '_' + index + '_' + item.type">
			<view class="rd-community yb-flex" :style="{
				'border-bottom-color': skinColor.color_gap_1
			}">
				<view class="subtitle yb-flex yb-row yb-align-center">
					<yb-avatar class="cover" :size="80" :src="item.avatar || app.$business.filterSource(item.source).logo || '/static/logo.png'"></yb-avatar>
					<view class="info yb-flex yb-flex-1">
						<yb-text custom-class="title" :lines="1" :size="30" :color="skinColor.color_1" :value="item.creator || app.$business.filterSource(item.source).title"></yb-text>
						<yb-text custom-class="time" :lines="1" :size="24" :color="skinColor.color_3" :value="item.updateTime || item.createTime"></yb-text>
					</view>
					<text class="land" :style="{color: skinColor.color_3}" v-if="index > 0"># {{index}}</text>
				</view>
				<view class="content" @longpress="copyTo(item.content || item.desc)">
					<view class="cnt" v-if="item.content" :style="'color: ' + skinColor.color_1 + '!important;'" v-html="convertHTML(item.content)"></view>
					<text class="content-text" :style="{color: skinColor.color_1}" v-else>{{item.desc}}</text>
				</view>
				<view class="images">
					<yb-grid :data="item.list" :gap="20" :column="5">
						<template v-for="(image, i) in item.list" :slot="i">
							<view class="image yb-flex" @click="onItemClick(image)">
								<rd-image tipSize="34" lazyLoad :border-radius="10" class="yb-flex-1" :src="image.type ? app.$business.getCover(image) : image" mode="aspectFill"></rd-image>
								<text v-if="image.type" class="badge" :style="{
									'background-color': app.$business.getColor(image.type),
									color: skinColor.color_white
								}">{{app.$business.getType(image.type)}}</text>
							</view>
						</template>
					</yb-grid>
				</view>
				<view class="comments yb-flex" v-if="item.comments.length > 0" :class="{
					'comments-none': item.comments.length == 0
				}" :style="{'background-color': skinColor.color_gap_1}">
					<view class="comment" v-for="(comment, i) in item.comments.slice(0, 2)" :key="i">
						<text class="comment-label" :style="{color: skinColor.color_blue}">{{comment.title}}：</text>
						<text class="comment-content" :style="{color: skinColor.color_1}">{{comment.content}}</text>
					</view>
					<view class="comment-more yb-flex yb-row yb-align-center yb-justify-center" v-if="item.comments.length > 2" @tap="app.$business.showComment(item)">
						<text class="comment-more-text" :style="{color: skinColor.color_cyan}">查看更多评论</text>
						<yb-icon name="angle-arrow-down" :size="26" :color="skinColor.color_cyan"></yb-icon>
					</view>
				</view>
				<view class="yb-flex yb-row yb-align-center yb-justify-end" style="margin-top: 20rpx;">
					<view class="tip yb-flex yb-row yb-align-center">
						<rd-icon name="thumbs" size="30" :color="skinColor.color_3"></rd-icon>
						<text class="tip-text" :style="{color: skinColor.color_3}">{{app.$utils.numtounit(item.thumbs)}}</text>
					</view>
					<view class="tip-gap" :style="{'background-color': skinColor.color_3}"></view>
					<view class="tip yb-flex yb-row yb-align-center" @tap="onCharacterClick(item)">
						<rd-icon name="avatar" size="30" :color="skinColor.color_3"></rd-icon>
						<text class="tip-text" :style="{color: skinColor.color_3}">看用户</text>
					</view>
					<view class="tip-gap" :style="{'background-color': skinColor.color_3}"></view>
					<view class="tip yb-flex yb-row yb-align-center" @tap="app.$business.showComment(item)">
						<rd-icon name="comment" size="30" :color="skinColor.color_3"></rd-icon>
						<text class="tip-text" :style="{color: skinColor.color_3}">看评论</text>
					</view>
				</view>
			</view>
			<slot name="bottom"></slot>
		</yb-list-item>
	</yb-list>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	import HTMLParser from "@/uni_modules/html-parser/js_sdk/index.js"
	export default {
		mixins: [appMixin],
		props: {
			list: {
				type: Array,
				default () {
					return new Array
				}
			},
			enableScrolling: {
				type: Boolean,
				default: false
			},
			bounce: {
				type: Boolean,
				default: true
			},
			index: {
				type: [Number,String],
				default: -1
			},
			loading: {
				type: [Boolean,Object,String],
				default: false
			},
			empty: {
				type: [Boolean,Object,String],
				default: false
			},
			pulldown: {
				type: [Boolean,Object],
				default: false
			},
			loadmore: {
				type: [Boolean,Object],
				default: false
			}
		},
		computed: {
			emptySync () {
				return Object.assign({}, {
					show: false,
					text: '暂无数据',
					color: this.skinColor.color_gap_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.empty) == 'String' ? {text: this.empty} : this.app.$utils.typeof(this.empty) == 'Boolean' ? {show: this.empty} : this.empty)
			},
			loadingSync () {
				return Object.assign({}, {
					show: false,
					text: '加载中',
					color: this.skinColor.color_1,
					bgColor: this.skinColor.color_bg_1
				}, this.app.$utils.typeof(this.loading) == 'String' ? {text: this.loading} : this.app.$utils.typeof(this.loading) == 'Boolean' ? {show: this.loading} : this.loading)
			},
			pulldownSync () {
				return Object.assign({}, {
					show: false,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.pulldown) == 'Boolean' ? {show: this.pulldown} : this.pulldown)
			},
			loadmoreSync () {
				return Object.assign({}, {
					show: !this.isLastPage,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.loadmore) == 'Boolean' ? {show: this.loadmore} : this.loadmore)
			},
			listSync () {
				return this.list.slice(0, Math.min(this.page * this.size, this.list.length))
			},
			isLastPage () {
				return this.page * this.size >= this.list.length
			}
		},
		data () {
			return {
				page: 1,
				size: 5,
				isLoadmoreEnd: false
			}
		},
		methods: {
			onItemClick (params) {
				if ( params.type ) {
					this.app.$business.openDetail(params)
				} else {
					this.app.$business.previewImage({
						urls: [params]
					})
				}
			},
			convertHTML (html) {
				let document = new HTMLParser(html.trim())
				let iframes = document.getElementsByTagName('iframe')
				iframes.forEach((iframe, key) => {
					let newIframe = iframe.outerHTML.trim()
					newIframe = newIframe.replace('<iframe', '<iframe onload="iframeLoad(' + key + ')"')
					newIframe = newIframe.replace('<iframe', '<iframe id="uni_polymerize_iframe_' + key + '"')
					newIframe = newIframe.replace('<iframe', '<iframe sandbox="allow-scripts allow-same-origin"')
					html = html.replace(iframe.outerHTML.trim(), newIframe)
				})
				let imgs = document.getElementsByTagName('img')
				imgs.forEach(img => {
					let newImg = img.tagContent.trim()
					newImg = newImg.replace('<img', `<img onclick="previewImg('${img.attributes.src}')"`)
					html = html.replace(img.tagContent.trim(), newImg)
				})
				return html
			},
			onCharacterClick (item) {
				this.$emit('characterClick', item)
			},
			copyTo (str) {
				uni.setClipboardData({
				    data: str,
				    success: () => {
						uni.showToast({
							title: '复制内容成功',
							icon: 'none'
						})
				    },
					fail: () => {
						uni.showToast({
							title: '复制内容失败',
							icon: 'none'
						})
					}
				});
			},
			previewImage (src) {
				this.app.$business.previewImage({
					urls: [src]
				})
			},
			onScroll (e) {
				this.$emit('scroll', e)
			},
			onPulldown (callback) {
				this.page = 1
				this.isLoadmoreEnd = false
				if ( this.index > -1 ) {
					this.$emit('pulldown', this.index, callback)
				} else {
					this.$emit('pulldown', callback)
				}
			},
			onLoadmore (callback) {
				if ( this.isLastPage ) {
					if ( this.page * this.size == this.listSync.length ) {
						this.page++
					} 
					if ( this.index > -1 ) {
						this.$emit('loadmore', this.index, callback)
					} else {
						this.$emit('loadmore', callback)
					}
				} else {
					this.page++
					callback('success')
				}
			},
			resetLoadmore () {
				this.isLoadmoreEnd = false
				this.$refs.list.resetLoadmore()
			},
			backTop () {
				this.$refs.list.backTop()
			},
			setLoadmoreEnd () {
				this.isLoadmoreEnd = true
				if ( this.isLastPage ) this.$refs.list.setLoadmoreEnd()
			},
			setLoadmoreSuccess() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreSuccess()
			},
			setLoadmoreFail() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreFail()
			}
		},
		watch: {
			isLastPage (newVal) {
				if ( !newVal ) {
					this.$refs.list && this.$refs.list.setLoadmoreSuccess()
				} else {
					if ( this.isLoadmoreEnd ) {
						this.$refs.list && this.$refs.list.setLoadmoreEnd()
					}
				}
			},
			list (newVal) {
				if ( newVal.length < this.page * this.size ) {
					this.page = Math.ceil(newVal.length / 20) > 0 ? Math.ceil(newVal.length / 20) : 1
				}
			}
		}
	}
</script>

<script lang="renderjs" type="module" module="community">
	export default {
		mounted () {
			window.iframeLoad = function (key) {
				let iframeWindow = window.frames['uni_polymerize_iframe_' + key].contentWindow
				iframeWindow.window.console.log = function () {}
				iframeWindow.window.console.warn = function () {}
				iframeWindow.window.console.error = function () {}
				iframeWindow.window.alert = function () {}
				iframeWindow.window.confirm = function () {}
			}
			window.previewImg = (src) => {
				// #ifndef H5
				this.$ownerInstance.callMethod('previewImage', src);
				// #endif
				// #ifdef H5
				this.previewImage(src);
				// #endif
			}
		}
	}
</script>

<style>
	.rd-community {
		padding: 30rpx;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	.rd-community .subtitle .cover {
		margin-right: 20rpx;
	}
	.rd-community .land {
		font-size: 24rpx;
	}
	.rd-community .subtitle .info .time {
		margin-top: 10rpx;
	}
	.rd-community .content {
		margin: 20rpx 0;
	}
	.rd-community .content img, .rd-community .content video, .rd-community .content iframe {
		max-width: 100%!important;
	}
	.rd-community .content .btn {
		font-size: 26rpx;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		width: 104rpx;
		padding: 10rpx 0 5rpx 0;
	}
	.rd-community .content-text {
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.rd-community .images .image {
		height: 120rpx;
		position: relative;
	}
	.rd-community .images .badge {
		font-size: 18rpx;
		position: absolute;
		right: 0;
		top: 0;
		padding: 5rpx 15rpx 5rpx 10rpx;
		border-bottom-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	.comments {
		margin-top: 20rpx;
		padding: 30rpx;
	}
	.comments-none {
		padding: 10rpx 30rpx;
	}
	.comments .comment {
		margin-bottom: 10rpx;
	}
	.comments .comment-label {
		font-size: 28rpx;
	}
	.comments .comment-content {
		font-size: 28rpx;
	}
	.comment-more {
		margin-top: 10rpx;
	}
	.comment-more-text {
		font-size: 24rpx;
		margin-right: 10rpx;
	}
</style>